//获取ul
let uu = document.querySelector('#container #uu')
let carousel = document.querySelector('.carousel .marskSm .info')

// let what = document.querySelector("#what")
//1.发起请求获取列表数据

//2.根据列表数据展示列表内容

//3.需要将商品的productId绑定到元素上

//4.点击元素进行跳转,跳到detail页面 并且要携带productId
let id = getQueryString('couponid');
// let titleid = getQueryString("title")
// // let pageid = 1
let el = "";
let el2 = "";



// el2 = `<p>首页> 全部分类> ${titleid}> </p>
//  <button>筛选</button>`
// what.innerHTML = el2;



fetch('http://chst.vip:1234/api/getcouponproduct?couponid=' + id)
    .then(body => body.json())
    .then(res => {
        console.log(res)
        res.result.forEach(item => {
            let regExp = /(?<=imgurl=)[^'"]*/;
            // console.log(item)
            //处理图片
            // let r = item.productImg2.match(regExp);
            // console.log(r)
            el += `<li data-index="${item.couponProductId}">
            <a href="#">
                <div class="img fl">
                    ${item.couponProductImg}
                </div>
                <div class="word">
                <div class="title">
                    <h4>${item.couponProductName}</h4>
                </div>
                <div class="price">
                    ${item.couponProductPrice}
                </div>
                <div class="time">
                ${item.couponProductTime}
                </div>
                </div>
            </a>
        </li>`

            el2 += `<li>
        ${item.couponProductImg}
        </li>`
            // console.log(el2)
        })
        uu.innerHTML = el;
        carousel.innerHTML = el2;
    })
//-----------------------------下面是轮播图的js代码--------------------------------------

setTimeout(function () {
    //设置ul的宽度
    var ul = document.querySelector('.marskSm .info');
    console.log(ul)
    var lis = document.querySelectorAll('.marskSm li');
    console.log(lis)
    ul.style.width = lis.length * lis[0].offsetWidth + 'px';
    //点击两个箭头轮播
    //右边箭头

    //添加节流阀
    var index = 0;
    var flag = true;
    $('.arrRight').click(function (num) {
        if (flag) {
            flag = false;
            index++;
            if (index <= lis.length - 1) {
                ul.style.transform = 'translateX(' + -index * lis[0].offsetWidth + 'px' + ')';
                ul.style.transition = '.5s ease-in-out'
            } else {
                index = lis.length - 1;
                alert('已经是最后一页啦');
                flag = true;
            }
        }
        //添加过度结束监听事件
        ul.addEventListener('webkitTransitionEnd', function () {
            flag = true;
        })
    });
    //左边箭头
    $('.arrLeft').click(function (num) {

        if (flag) {
            index--;
            flag = false;
            if (index >= 0) {
                ul.style.transform = 'translateX(' + -index * lis[0].offsetWidth + 'px' + ')';
                ul.style.transition = '.5s ease-in-out'
            } else {
                index = 0;
                alert('已经是第一页啦');
                // return;
                flag = true;
            }
        }
        ul.addEventListener('webkitTransitionEnd', function () {
            // flag = true;
        })
    });
    //每一个单个点击事件
    $('#container #uu').find('li').click(function () {
        $('.carousel').css({ 'transform': 'translateY(0px)', 'transition': '.7s ease-in-out' });
        ul.style.transition = 'none';
        index = $(this).data('index');
        ul.style.transform = 'translateX(' + -index * lis[0].offsetWidth + 'px' + ')';
    });

    //关闭点击事件
    $('.marskSm').find('i').click(function () {
        $('.carousel').css('transform', 'translateY(-1000px)');
    });
}, 100)
